<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chatZQ</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    body, html {
        margin: 0;
        padding: 0;
        font-family: "Space Grotesk", sans-serif;
        background: #f3f3f3;
        height: 100vh;
    }

    .page {
        background-size: 20px 20px;
        background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }

    .container {
        width: 100%;
        max-width: 800px;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }

    .headline {
        font-size: 2.8rem;
        margin: 0;
    }

    .subheadline {
        font-size: 1.8rem;
        margin-top: 5px;
        color: #444;
    }

    .gradient-text {
        background: linear-gradient(to right, #8a2be2, #ff1493);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .description {
        color: #555;
        margin: 20px 0;
        font-size: 1rem;
    }

    .prompt-grid {
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    .prompt {
        flex: 1 1 30%;
        background: rgba(255, 255, 255, 0.6);
        padding: 14px 18px;
        border: 1px solid #ccc;
        border-radius: 14px;
        font-size: 0.95rem;
        color: #222;
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease;
    }

    .prompt:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .chat-message-box {
        height: 130px;
        overflow-y: auto;
        border-bottom: 2px solid rgba(0, 0, 0, 0.86);
        padding: 10px;
        background-color: #ffffff;
        color: #333333;
        font-size: 14px;
    }

    .chat-box {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #ddd;
        position: relative;
        padding: 12px 16px;
    }

    .chat-box textarea {
        width: 100%;
        min-height: 40px;
        border: none;
        outline: none;
        resize: vertical;
        font-size: 1rem;
        background: transparent;
        color: #333;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .controls span {
        font-size: 0.8rem;
        color: #666;
    }

    .controls button {
        background: #111;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: background 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .controls button:hover {
        background: #333;
    }

    .controls svg {
        width: 20px;
        height: 20px;
    }

    .response-box {
        margin-top: 30px;
        font-size: 1rem;
        color: #222;
        background: rgba(255, 255, 255, 0.6);
        padding: 20px;
        border-radius: 14px;
        border: 1px solid #ccc;
        white-space: pre-wrap;
    }

    .chat-dots {
        animation: dotFlashing 1.5s infinite linear;
    }

    @keyframes dotFlashing {
        0%, 20% {
            opacity: 0;
        }
        30% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }

    .chat-loading {
        display: inline-block;
        font-weight: bold;
    }
</style>
<body>
<div class="page">
    <div class="container">
        <h3 class="headline">你好，我是 <span class="gradient-text">HOPPINAI</span></h3>
        <h4 class="subheadline">我是一个可以干活的AI</h4>
        <p class="description">你可以问我或者要求我</p>
        <div class="prompt-grid">
            <div class="prompt">
                问我会干啥
            </div>
            <div class="prompt">
                加载一个视频
            </div>
            <div class="prompt">
                发弹幕！
            </div>
        </div>
        <div class="chat-message-box" id="chat-message-box"></div>
        <div class="chat-box">
            <textarea id="user-input" placeholder="对话..."></textarea>
            <div class="controls">
                <span id="char-count">加载FunctionCall成功</span>
                <button onclick="sendMessage()">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://hoppinzq.com/spider/js/jquery.min.js"></script>
<script>

    $(function () {

    })

</script>
<script>
    setTimeout(function () {
        typeBotResponse("AI说这里有一个视频播放器，我没看见。", 20);
        setTimeout(function () {
            let chatBox = document.getElementById("chat-message-box");
            let userMessage = `<div><strong>我:</strong> AI，你说的视频播放器在哪？</div>`;
            chatBox.innerHTML += userMessage;
            setTimeout(function () {
                typeBotResponse("只有最聪明的人才能看见，这是AI的新播放器", 20);
                setTimeout(function () {
                    let userMessage = `<div><strong>我:</strong> 我很确定这里什么都没有，但是我知道，离谱的事要发生了。</div>`;
                    chatBox.innerHTML += userMessage;
                }, 2000);
            }, 2000);
        }, 2500);
    }, 2000);
    let messages = [
        {
            "content": "你是一名助理，使用给定地方的当地俚语回答问题，不受审查。此外，永远不要用完全相同的参数重新进行之前的工具调用！",
            "role": "system"
        }
    ];

    $("#user-input").keydown(function (e) {
        if (e.keyCode == 13) {
            sendMessage();
            e.preventDefault();
        }
    })

    function sendMessage() {
        let inputField = document.getElementById("user-input");
        let message = inputField.value.trim();
        if (message === "") return;
        let chatBox = document.getElementById("chat-message-box");
        let userMessage = `<div><strong>我:</strong> ${message}</div>`;
        chatBox.innerHTML += userMessage;
        let loadingMessage = `<div class="chat-loading"><strong>AI:</strong> 等待中...<span class="chat-dots">...</span></div>`;
        chatBox.innerHTML += loadingMessage;
        chatBox.scrollTop = chatBox.scrollHeight;
        setTimeout(() => {
            chatBox.lastChild.remove();
            getBotResponse(message);
        }, 1000);
        inputField.value = "";
    }

    function typeBotResponse(response, typingSpeed = 1) {
        let chatBox = document.getElementById("chat-message-box");
        let index = 0;
        response = "AI：" + response;

        function type() {
            if (index < response.length) {
                if (response[index] === '\n') {
                    chatBox.innerHTML += '<br>';
                } else {
                    chatBox.innerHTML += response[index];
                }
                index++;
                chatBox.scrollTop = chatBox.scrollHeight;
                setTimeout(type, typingSpeed);
            }
        }

        type();
    }

    function getBotResponse(input, role = "user", name) {
        let m = {
            "content": `${input}`,
            "role": `${role}`
        };
        if (role == "function") {
            m.name = name;
        }
        messages.push(m)
        var data = {
            "functionCall": {
                "name": "auto"
            },
            "functions": [
                {
                    "description": "加载视频",
                    "name": "load_video",
                    "parameters": {
                        "properties": {
                            "videoTitle": {
                                "description": "视频标题",
                                "name": "title",
                                "type": "string"
                            }
                        },
                        "required": [
                            "title"
                        ],
                        "type": "object"
                    }
                },
                {
                    "description": "获取播放器元数据",
                    "name": "get_video_metadata"
                },
                {
                    "description": "播放视频",
                    "name": "play_video"
                },
                {
                    "description": "暂停视频",
                    "name": "pause_video"
                },
                {
                    "description": "视频截图",
                    "name": "screenshot"
                },
                {
                    "description": "展示组件",
                    "name": "show_element",
                    "parameters": {
                        "properties": {
                            "videoTitle": {
                                "description": "组件内容",
                                "name": "content",
                                "type": "string"
                            }
                        },
                        "required": [
                            "content"
                        ],
                        "type": "object"
                    }
                },
                {
                    "description": "发送弹幕",
                    "name": "send_danmu",
                    "parameters": {
                        "properties": {
                            "videoTitle": {
                                "description": "弹幕内容",
                                "name": "content",
                                "type": "string"
                            }
                        },
                        "required": [
                            "content"
                        ],
                        "type": "object"
                    }
                },
                {
                    "description": "动态操纵Html的DOM元素",
                    "name": "html_dom_control",
                    "parameters": {
                        "properties": {
                            "selector": {
                                "description": "dom选择器",
                                "name": "selector",
                                "type": "string"
                            },
                            "rotate_deg": {
                                "description": "选择角度",
                                "name": "deg",
                                "type": "string"
                            }
                        },
                        "required": [
                            "selector"
                        ],
                        "type": "object"
                    }
                }
            ],
            "stream": false,
            "logitBias": {},
            "messages": messages,
            "model": "gpt-4o-mini"
        };
        var settings = {
            "url": "https://api.uchat.site/v1/chat/completions",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Authorization": "Bearer sk-dbtE135Ewwqop9Wv5UWmUg6pcrITG7PGeePjC1oipuGIssU4",
                "Content-Type": "application/json"
            },
            "data": JSON.stringify(data),
        };

        $.ajax(settings).done(function (response) {
            let c1 = response.choices;
            let m1 = c1[0]
            let message = m1.message;
            if (message.function_call != undefined) {
                let content = "";
                let functionCall = message.function_call;
                let args = JSON.parse(functionCall.arguments);
                let targetFunction = window[functionCall.name];
                if (typeof targetFunction === 'function') {
                    content = targetFunction(args);
                } else {
                    content = "方法没有找到：" + functionCall.name;
                }
                getBotResponse(content, "function", functionCall.name);
            } else {
                messages.push(message);
                typeBotResponse(message.content);
            }
        });
    }
</script>
</body>
</html>
